Notes on Accessible Web Design

Website Accessibility

  1. Label everything so that assistive technology can read it. All images require alt tags; all links, title tags.
  2. Keep your code clean! See document: “What Beautiful HTML looks like” – Use appropriate tags; don’t use tables for layout.
  3. Separate presentation from content; html should contain no styling – leave that to the CSS.
  4. Avoid assumptions – the site will be viewed on all manner of devices at all screen resolutions.
  5. Offer Alternatives – if using javascript or jquery, make sure it degrades well in older browser. Avoid over-complicating with scripts. If using Flash etc. offer information in another format too.
  6. Fonts should be sized using relative units (em,%, xx-large etc.) Many browsers have the ability to scale text even when the fonts are set with absolute sizes, but some cannot. Allowing text to scale will make your site more legible for low vision users.
  7.  Consider a screen’s real estate: Locate more important information left and top
  8. Facilitate scanning: Most viewers (about 75%) first scan text and menus for information (and ignore visuals!)
  9. Increase detail and complexity with linked pages (fewer than 20% read word-by-word)
  10. Standardize presentation and navigation
  11. Locate logos, menus and features consistently and predictably
  12. Link longer pages “back to the top”
  13. Build content complexity through linked pages
  14. Webpages should be linked three or less deep within the site
  15. Visitors should always know where they are in your site and be able to easily retrace or return
  16. Fonts: Don’t use too many fancy fonts; they can be hard to read. There are some accessible fonts here: Best 20 webfonts from Google Web Fonts and @font-face embedding.

HTML for Accessibility & Grace.. (goes with Beautiful HTML above)

  • HTML5 – HTML5 and it’s new elements make for the most beautiful HTML yet.
  • DOCTYPE – HTML5 has the best DOCTYPE ever
  • Indentation – Code is indented to show parent/child relationships and emphasize hierarchy.
  • Charset – Declared as first thing in the head, before any content.
  • Title – Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site.
  • CSS – Only one single stylesheet is used (media types declared inside stylesheet), and only served to good browsers. IE 6 and below are served a universal stylesheet.
  • Body – ID applied to body to allow for unique page styling without any additional markup.
  • JavaScript – jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
  • File Paths – Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated.
  • Image Attributes – Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency.
  • Main Content First – The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material.
  • Appropriate Descriptive Block-Level Elements – Header, Nav, Section, Article, Aside… all appropriately describe the content they contain better than the divs of old.
  • Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy.
  • Appropriate Descriptive Tags – Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list.
  • Common Content Included – Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you)
  • Semantic Classes – Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. “col” is much better than “left”)
  • Classes – Are used any time similar styling needs to be applied to multiple elements.
  • IDs – Are used any time an element appears only once on the page and cannot be targeted reasonably any other way.
  • Dynamic Elements – Things that need to be dynamic, are dynamic.
  • Characters Encoded – If it’s a special character, it’s encoded.
  • Free From Styling – Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content.
  • Comments – Comments are included for things that may not be immediately obvious upon reviewing the code.
  • Valid – The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc.

Changing Font Size

One thing that is a must-have is a way of offering text-resizing. I want a couple of buttons to do the job, enlarge and reduce text size… I’ve looked before for a solution but all seemed a little complicated. However – I just found an article that appears to offer a simple solution. See article: Change Text Size On Click With JavaScript.
Also:

  • jfontsize – JQuery font resize tool; “an easy-to-use jQuery Plugin that adds A+ and A- buttons to your website.”

Diagram showing five different font sizes in three different styles.

Changing Styles

There are a lot of solutions to switching between styles, I opted for one made by DynamicDrive. It makes use of Javascript so I’m just not sure what to do if people have Javascript disabled – the crazy fools.. So, OK, here’s the link to the DynamicDrives’ Style Sheet Switcher (v1.1) And I’ll try to find a style switcher that caters for people who don’t use JavaScript…!
accessibility002

Leave a Reply