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
3. Without accessible
Markup there’s no
4. • ﬁ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?
5. CSS does not always
make just beautiful
6. • 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!
7. Interaction is handled
on the Server
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
on the cake
• 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!)
11. another layer:
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
14. • is there still someone believing that?
• most Screenreaders actually handle
• they just don’t know all the time
15. • 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
17. • is the website usable without a mouse?
• the tab key is one of the most important
• do elements react on :hover and :focus?
18. • what happens if a page gets scaled up or
• screen magniﬁers only show a very small
part of the screen
• does really everyone understand what
happens on the page right now?
19. And another Layer:
20. • mapping existing and well known concepts
from the operating systems to custom
elements in the Browser
• adding meaning to meaningless Markup
• instant updates to the user