HTML5 and CSS3, Second Edition
The next figure shows that now we have something much more readable. Figure 13—Our new two-column newsletter We can add more con ...
Firefox uses the -moz- prefix. Chrome and Safari, as well as many mobile browsers and recent versions of Opera, use the -webkit ...
document.createElement("header"); document.createElement("footer"); document.createElement("article"); document.createElement("a ...
smartphones to easily read the content. It’s good to know that we can use the presentation layer to aid readability instead of h ...
CHAPTER 5 Making Accessible Interfaces Many of the new elements in HTML5 help us more accurately describe our content. This beco ...
specification have been rolled into HTML5,^2 while others remain separate and can complement the HTML5 specification. Many scree ...
Tip 14. Providing Navigation Hints with ARIA Roles Most websites share a common structure: there’s a header, a navigation sectio ...
Role Use Identifies where information about the content, such as copyright information and publication date, exists contentinfo ...
html5_aria/blog/index.html <sectionid="sidebar"role="complementary"> <nav> <h3>Archives</h3> <ul> ...
Document-Structure Roles Document-structure roles help screen readers identify parts of static content easily, which can help be ...
allow key presses through to the web application. However, when the focus is on static content, it could allow the screen reader ...
Tip 15. Creating an Accessible Updatable Region We use JavaScript heavily in our web applications these days. Popular frame- wor ...
Figure 15—A mock-up of the home page using jQuery to change the main content Creating the Page We’ll start by creating a basic H ...
<footerid="footer"role="contentinfo"> <p>Copyright© 2013AwesomeCo.</p> <nav> <ul> <li><ah ...
Now let’s add some CSS to the page to create the layout we need. It’ll be similar to the CSS for the blog. In stylesheets/style. ...
Polite and Assertive Updating There are two types of methods for alerting the user to changes on the page when using aria-live. ...
10 activateTab(target.attr("href")); }; }; }); }; varactivateTab=function(selector){ 15 $("[aria-hidden=false]").hide().att ...
Tip 16. Improving Table Accessibility For years, HTML tables have been a great source of pain when it comes to accessibility. It ...
Figure 16—AwesomeConf schedule page Here’s a snippet of the code from the current page. html5_accessible_tables/original_index.h ...
It’s a pretty standard table, but it has headings on both the x- and y-axes. This can present a problem for some screen reader–a ...
«
1
2
3
4
5
6
7
8
9
10
»
Free download pdf