Creating accessible websites isn't just helpful for impaired users; abled users reap benefits of being able to consume content that has improved accessibility, too:

  • Keyboard navigation can make web browsing quicker
  • Semantic HTML can improve compatibility with rendering across browsers
  • Semantic HTML can improve programmatic access to web pages
  • Semantic HTML can improve your SEO
  • Screen readers can turn a web page into an audiobook
  • Responsive Web Design (RWD) can make your website accessible on more types of devices
  • Requiring JS to display pages can consume system resources, so making content available without JS will improve your readers' experience. Remember, your website isn't the only one people will have open.

It doesn't have to be perfect; a best-effort pass to fix simple problems is better than nothing.

Patterns for accessible web development

ASCII art a11y

  • Wrap ASCII art with <span aria-hidden="true"> to prevent screen readers from reading character names,
  • then wrap that with <pre aria-label="some label"> so that screen readers indicate the existence of the art.
  • Using only aria-label will not prevent characters from being read!
<pre aria-label="ascii art cube"><span aria-hidden="true">
      _________
   ,'        ,'|
  +--------+   |
  |        |   |
  |        | ,'
  +--------+
</span></pre>