over 90 different roles to map existing OS concepts onto your Markup
Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on.
Site-orientated content, such as the title of the page and the logo.
Supporting content for the main content, but meaningful in its own right when separated from the main content. For example, the weather listed on a portal.
Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.
Content that is directly related to or expands on the central content of the document.
Content that contains the links to navigate this document and/or related documents.
This section contains a search form to search the site.
Stores the lowest value a range may have.
Stores the highest value a range may have.
Stores the current value in a range.
Stores readable text to help the user understand the context. For example, \"30 dollars\" .
Stores the id attribute of a text label containing an appropriate prompt for this widget.
with and without
GeekUp Leeds 15 April 2009
• the content of the page is at least as
• nothing is being withheld from users
• users of assistive technologies are able to
use the page too
Markup there’s no
• ﬁrst and foremost a Website needs to
• do we use the best matching HTML
Elements for each Part of the Page?
• is the Page perfectly logic, understandable
and usable without CSS?
• badly used CSS is able to make a page
• display:none and visibility:hidden are not
generally evil but sadly quite often
• hidden elements will be revealed when
you :hover over them - nice! But what
happens if you don’t use a mouse?
• CSS is for design - not for interaction!
you need to solve without ﬁrst
• a reload may not be cool anymore but it’s
exactly as necessary as it was 10 years ago
• if that is taken care of we can add some
• existing interaction elements like links or
buttons get hijacked and changed to do
their job in the Browser instead on the
• new interaction elements, that offer
tabable elements only!)
different CSS if
• we better leave the changes to someone
that does that job better and faster than
we can: CSS
• a simple 1 liner in the head does the+= ” js”;
• by adding .js in front of existing selectors you can
• is there still someone believing that?
• most Screenreaders actually handle
• they just don’t know all the time
• inform Screenreaders about what’s
• a logic and understandable workﬂow is the
easiest thing to test without a Screenreader
• focus() the right element
• when updating the DOM it might be
necessary to force the Screenreader’s
virtual buffer to refresh by updating a
hidden Form ﬁeld