├── .gitignore ├── .vscode └── spellchecker.json ├── CNAME ├── README.md ├── _config.yml ├── _data ├── ariaTable.yml ├── assistive.yml └── faqs.yml ├── _includes ├── articles.html ├── assistive-table.html ├── author.html ├── figure.html ├── footer.html ├── header.html ├── outline.html ├── patterns.html ├── picture.html ├── share.html ├── table.html ├── tests.html └── youtube.html ├── _layouts ├── default.html ├── pattern.html └── post.html ├── _posts ├── 2016-07-08-beginner-guide-to-web-accessibility.markdown ├── 2016-09-02-page-title-pattern.markdown ├── 2016-09-08-search-pattern.markdown ├── 2016-09-14-skip-link-pattern.markdown ├── 2016-09-18-intro-html5-sectioning-elements.markdown ├── 2016-09-18-mobile-nav-pattern.markdown ├── 2016-09-21-intro-wai-aria.markdown ├── 2016-10-11-using-divs-for-everything.markdown ├── 2016-10-18-pagination-pattern.markdown ├── 2016-11-08-aljazeera-a11y-audit.markdown └── 2019-09-17-checkbox-pattern.markdown ├── _scss ├── _syntax.scss ├── components │ ├── _components.article.scss │ ├── _components.bio.scss │ ├── _components.block.scss │ ├── _components.breadcrumbs.scss │ ├── _components.faqs.scss │ ├── _components.footer.scss │ ├── _components.header.scss │ ├── _components.headline.scss │ ├── _components.ingredients.scss │ ├── _components.link.scss │ ├── _components.list.scss │ ├── _components.logo.scss │ ├── _components.module.scss │ ├── _components.nav.scss │ ├── _components.notice.scss │ ├── _components.page-title.scss │ ├── _components.pattern.scss │ ├── _components.post.scss │ ├── _components.share.scss │ ├── _components.skip.scss │ ├── _components.social.scss │ ├── _components.subline.scss │ ├── _components.table.scss │ └── _components.terms.scss ├── elements │ ├── _elements.headings.scss │ ├── _elements.images.scss │ ├── _elements.links.scss │ ├── _elements.lists.scss │ ├── _elements.main.scss │ ├── _elements.page.scss │ ├── _elements.paragraphs.scss │ └── _elements.quotes.scss ├── generic │ ├── _generic.box-sizing.scss │ ├── _generic.reset.scss │ └── _generic.shared.scss ├── main.scss ├── objects │ ├── _objects.layout.scss │ └── _objects.wrapper.scss ├── scopes │ └── _scopes.article.scss ├── settings │ ├── _all.scss │ ├── _settings.colors.scss │ ├── _settings.config.scss │ ├── _settings.global.scss │ └── _variables.scss ├── tools │ ├── _all.scss │ ├── _config.mq.scss │ ├── _tools.aliases.scss │ ├── _tools.functions.scss │ ├── _tools.mixins.scss │ └── _tools.typography.scss └── trumps │ ├── _trumps.debug.scss │ ├── _trumps.headings.scss │ ├── _trumps.healthcheck.scss │ ├── _trumps.helpers.scss │ ├── _trumps.shame.scss │ └── _trumps.widths.scss ├── _site ├── CNAME ├── README.md ├── article │ ├── aljazeera-a11y-audit │ │ └── index.html │ ├── beginners-guide-to-web-a11y │ │ └── index.html │ ├── dont-use-divs-for-everything │ │ └── index.html │ ├── intro-html5-sectioning-elements │ │ └── index.html │ └── intro-wai-aria │ │ └── index.html ├── articles │ └── index.html ├── assets │ ├── css │ │ └── main.css │ ├── images │ │ ├── articles │ │ │ ├── aljazeera │ │ │ │ ├── dropdowns.jpg │ │ │ │ ├── header.jpg │ │ │ │ ├── live-link-dropdown.jpg │ │ │ │ ├── live-link.jpg │ │ │ │ ├── schedule.jpg │ │ │ │ ├── search-button.jpg │ │ │ │ ├── search-markup.jpg │ │ │ │ ├── skip-link.jpg │ │ │ │ ├── social-links.jpg │ │ │ │ └── topics-nav.jpg │ │ │ ├── aria-intro │ │ │ │ ├── aria.png │ │ │ │ └── aria.svg │ │ │ └── divs-for-everything │ │ │ │ ├── compare.jpg │ │ │ │ └── emmet.gif │ │ ├── favicon-32x32.png │ │ ├── logo.png │ │ ├── logo.svg │ │ ├── mockup-2-markup-mobile.svg │ │ ├── mockup-2-markup.png │ │ ├── mockup-2-markup.svg │ │ ├── pattern.png │ │ ├── patterns │ │ │ ├── checkbox │ │ │ │ ├── checkbox-1.gif │ │ │ │ ├── checkbox-2.gif │ │ │ │ ├── checkbox-3.gif │ │ │ │ ├── checkbox-4.gif │ │ │ │ ├── checkbox-5.gif │ │ │ │ ├── checkmark.svg │ │ │ │ ├── custom-1.png │ │ │ │ ├── custom-2.png │ │ │ │ ├── custom-3.png │ │ │ │ ├── custom-4.png │ │ │ │ ├── outline-issue.png │ │ │ │ ├── reduce-macos.png │ │ │ │ ├── text-selected.png │ │ │ │ ├── thumb.jpg │ │ │ │ ├── thumb.webp │ │ │ │ ├── voiceover-1.png │ │ │ │ └── voiceover-2.png │ │ │ ├── mobile-nav │ │ │ │ ├── js-detect.jpg │ │ │ │ ├── nav-example-1.jpg │ │ │ │ ├── thumb.jpg │ │ │ │ └── thumb.webp │ │ │ ├── page-title │ │ │ │ ├── chrome-a11y.jpg │ │ │ │ ├── thumb.jpg │ │ │ │ └── thumb.webp │ │ │ ├── pagination │ │ │ │ ├── thumb.jpg │ │ │ │ └── thumb.webp │ │ │ ├── search │ │ │ │ ├── final-result.jpg │ │ │ │ ├── form-color-blind.jpg │ │ │ │ ├── form-normal.jpg │ │ │ │ ├── search-error-blind.jpg │ │ │ │ ├── search-error-normal.jpg │ │ │ │ ├── search-error.jpg │ │ │ │ ├── search-focus.jpg │ │ │ │ ├── search-no-label.jpg │ │ │ │ ├── thumb.jpg │ │ │ │ └── thumb.webp │ │ │ └── skip │ │ │ │ ├── explain-hiding-link-focused.jpg │ │ │ │ ├── explain-hiding-link.jpg │ │ │ │ ├── nytimes-tabbing.gif │ │ │ │ ├── nytimes.jpg │ │ │ │ ├── skip-browser-zoom.jpg │ │ │ │ ├── thumb.jpg │ │ │ │ └── thumb.webp │ │ ├── powered-by.svg │ │ ├── shadeed.jpg │ │ └── thumb.jpg │ └── js │ │ ├── fontfaceobserver.js │ │ ├── modernizr.js │ │ └── picturefill.min.js ├── faq │ └── index.html ├── feed.xml ├── index.html ├── mockup-to-markup │ └── index.html ├── package-lock.json ├── pattern │ ├── accessible-search │ │ └── index.html │ ├── checkbox │ │ └── index.html │ ├── mobile-nav │ │ └── index.html │ ├── page-title │ │ └── index.html │ ├── pagination │ │ └── index.html │ └── skip-link │ │ └── index.html ├── patterns │ └── index.html └── terms │ └── index.html ├── articles.html ├── assets ├── css │ └── main.css ├── images │ ├── articles │ │ ├── aljazeera │ │ │ ├── dropdowns.jpg │ │ │ ├── header.jpg │ │ │ ├── live-link-dropdown.jpg │ │ │ ├── live-link.jpg │ │ │ ├── schedule.jpg │ │ │ ├── search-button.jpg │ │ │ ├── search-markup.jpg │ │ │ ├── skip-link.jpg │ │ │ ├── social-links.jpg │ │ │ └── topics-nav.jpg │ │ ├── aria-intro │ │ │ ├── aria.png │ │ │ └── aria.svg │ │ └── divs-for-everything │ │ │ ├── compare.jpg │ │ │ └── emmet.gif │ ├── favicon-32x32.png │ ├── logo.png │ ├── logo.svg │ ├── mockup-2-markup-mobile.svg │ ├── mockup-2-markup.png │ ├── mockup-2-markup.svg │ ├── pattern.png │ ├── patterns │ │ ├── checkbox │ │ │ ├── checkbox-1.gif │ │ │ ├── checkbox-2.gif │ │ │ ├── checkbox-3.gif │ │ │ ├── checkbox-4.gif │ │ │ ├── checkbox-5.gif │ │ │ ├── checkmark.svg │ │ │ ├── custom-1.png │ │ │ ├── custom-2.png │ │ │ ├── custom-3.png │ │ │ ├── custom-4.png │ │ │ ├── outline-issue.png │ │ │ ├── reduce-macos.png │ │ │ ├── text-selected.png │ │ │ ├── thumb.jpg │ │ │ ├── thumb.webp │ │ │ ├── voiceover-1.png │ │ │ └── voiceover-2.png │ │ ├── mobile-nav │ │ │ ├── js-detect.jpg │ │ │ ├── nav-example-1.jpg │ │ │ ├── thumb.jpg │ │ │ └── thumb.webp │ │ ├── page-title │ │ │ ├── chrome-a11y.jpg │ │ │ ├── thumb.jpg │ │ │ └── thumb.webp │ │ ├── pagination │ │ │ ├── thumb.jpg │ │ │ └── thumb.webp │ │ ├── search │ │ │ ├── final-result.jpg │ │ │ ├── form-color-blind.jpg │ │ │ ├── form-normal.jpg │ │ │ ├── search-error-blind.jpg │ │ │ ├── search-error-normal.jpg │ │ │ ├── search-error.jpg │ │ │ ├── search-focus.jpg │ │ │ ├── search-no-label.jpg │ │ │ ├── thumb.jpg │ │ │ └── thumb.webp │ │ └── skip │ │ │ ├── explain-hiding-link-focused.jpg │ │ │ ├── explain-hiding-link.jpg │ │ │ ├── nytimes-tabbing.gif │ │ │ ├── nytimes.jpg │ │ │ ├── skip-browser-zoom.jpg │ │ │ ├── thumb.jpg │ │ │ └── thumb.webp │ ├── powered-by.svg │ ├── shadeed.jpg │ └── thumb.jpg └── js │ ├── fontfaceobserver.js │ ├── modernizr.js │ └── picturefill.min.js ├── faq.html ├── feed.xml ├── gulpfile.js ├── index.html ├── mockup-to-markup.html ├── package-lock.json ├── package.json ├── patterns.html └── terms.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | css/main.css 4 | dist/ -------------------------------------------------------------------------------- /.vscode/spellchecker.json: -------------------------------------------------------------------------------- 1 | { 2 | "language": "en_US", 3 | "ignoreWordsList": [ 4 | "dropdown" 5 | ], 6 | "documentTypes": [ 7 | "markdown", 8 | "latex", 9 | "plaintext" 10 | ], 11 | "ignoreRegExp": [], 12 | "ignoreFileExtensions": [], 13 | "checkInterval": 5000 14 | } -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | www.a11ymatters.com -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Accessibility Matters 2 | 3 | Documenting everything through the journey of learning web accessibility. 4 | 5 | ## System Preparation 6 | 7 | To use this project, you'll need the following things installed on your machine. 8 | 9 | 1. [Jekyll](http://jekyllrb.com/) - `$ gem install jekyll` 10 | 2. [NodeJS](http://nodejs.org) - use the installer. 11 | 3. [GulpJS](https://github.com/gulpjs/gulp) - `$ npm install -g gulp` (mac users may need sudo) 12 | 13 | ## Local Installation 14 | 15 | 1. Clone this repo, or download it into a directory of your choice. 16 | 2. Inside the directory, run `npm install`. 17 | 18 | ## Usage 19 | 20 | **development mode** 21 | 22 | This will give you file watching, browser synchronisation, auto-rebuild, CSS injecting etc etc. 23 | 24 | ```shell 25 | $ gulp 26 | ``` 27 | 28 | ## Credit 29 | 30 | - [jekyll-gulp-sass-browser-sync](https://github.com/shakyShane/jekyll-gulp-sass-browser-sync.git) 31 | - [RSS Feed](https://github.com/snaptortoise/jekyll-rss-feeds) -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | name: a11ymatters 2 | description: Documenting everything through the journey of learning web accessibility. 3 | url: http://www.a11ymatters.com 4 | markdown: kramdown 5 | highlighter: rouge # or rouge or null 6 | exclude: ["node_modules", "gulpfile.js", "package.json"] 7 | baseurl: /a11ymatters 8 | 9 | links: 10 | - title: Home 11 | url: / 12 | id: / 13 | - title: Articles 14 | url: /articles 15 | id: /articles/ 16 | - title: Patterns 17 | url: /patterns 18 | id: /patterns/ 19 | - title: FAQ 20 | url: /faq 21 | id: /faq/ 22 | 23 | 24 | kramdown: 25 | auto_ids: true -------------------------------------------------------------------------------- /_data/ariaTable.yml: -------------------------------------------------------------------------------- 1 | - key: header 2 | value: banner 3 | 4 | - key: main 5 | value: main 6 | 7 | - key: nav 8 | value: navigation 9 | 10 | - key: aside 11 | value: complementary 12 | 13 | - key: footer 14 | value: contentinfo 15 | 16 | - key: section 17 | value: region -------------------------------------------------------------------------------- /_data/assistive.yml: -------------------------------------------------------------------------------- 1 | - key: Mac OS 2 | value: VoiceOver 3 | 4 | - key: Windows 5 | value: Narrator 6 | 7 | - key: Ubuntu 8 | value: Orca 9 | 10 | - key: Android 11 | value: TalkBack 12 | 13 | - key: iOS 14 | value: VoiceOver -------------------------------------------------------------------------------- /_data/faqs.yml: -------------------------------------------------------------------------------- 1 | - question: What is Web Accessibilty? 2 | answer: "In short, making a website available for everyone. Regardless of his physical abilites and disabilits." 3 | 4 | - question: What are the main disability key areas? 5 | answer: "Visual, hearing, mobility and cognition." 6 | 7 | - question: Why do I need to care to 1 person out of 100? 8 | answer: "We all need an accessible web, not only people with disabilites. Just imagine yourself in the shoes of this person. Would you be happy if you open a web page and can't navigate between the navigation items for example? No." 9 | 10 | - question: Would accessibility need more development time? 11 | answer: "If you want to build custom components like menus for example, then you will need to write more code and as a result you will need more time. But most of the time, if you sticked to HTML semantics, you will save yourself a lot of effort and get an accessible web page for free." -------------------------------------------------------------------------------- /_includes/articles.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/assistive-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | {% for item in site.data.assistive %} 12 | 13 | 14 | 15 | 16 | {% endfor %} 17 | 18 | 19 |
{{ include.col1 }}{{ include.col2 }}
{{ item.key }}{{ item.value }}
20 | 21 | -------------------------------------------------------------------------------- /_includes/author.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Ahmad Shadeed

4 |

UI, UX Designer & Front-End Developer. Writing about web accessibility on @weba11ymatters and sharing articles on my blog. Interested in Modular Design, CSS Architecture 5 | and Layout Design.

6 |
-------------------------------------------------------------------------------- /_includes/figure.html: -------------------------------------------------------------------------------- 1 |
2 | {{ include.title }} 3 |
{{ include.title }}
4 |
-------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/outline.html: -------------------------------------------------------------------------------- 1 | {{ include.title }} -------------------------------------------------------------------------------- /_includes/patterns.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/picture.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | {{ include.title }} 5 | 6 |
{{ include.title }}
7 |
-------------------------------------------------------------------------------- /_includes/share.html: -------------------------------------------------------------------------------- 1 |
2 |

Share the article:

3 |

4 | Did you like the article? Share it on Twitter 6 |

7 |
-------------------------------------------------------------------------------- /_includes/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | {% for item in site.data.ariaTable %} 12 | 13 | 14 | 15 | 16 | {% endfor %} 17 | 18 | 19 |
{{ include.col1 }}{{ include.col2 }}
{{ item.key }}{{ item.value }}
20 | 21 | -------------------------------------------------------------------------------- /_includes/tests.html: -------------------------------------------------------------------------------- 1 |
2 |

Testing results

3 |
4 | 7 |
8 |
-------------------------------------------------------------------------------- /_includes/youtube.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accessibility Matters - {{ page.title }} 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | {% if page.url == "/" %} 21 | 22 | {% else %} 23 | 24 | {% endif %} 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | {% if page.url == "/" %} 36 | 37 | {% else %} 38 | 39 | {% endif %} 40 | 41 | 42 | 43 | 44 | 54 | 55 | 56 | Skip to main content 57 | {% include header.html %} 58 | 59 | {{ content }} 60 | 61 | {% include footer.html %} 62 | 63 | 64 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |
7 |
8 |
9 | Ahmad Shadeed wrote: 10 |

{{ page.title }}

11 | 12 |
13 |
    14 |
    15 |
  • Home
    • 16 |
  • Articles
    • 17 |
  • {{ page.title }}
    • 18 |
    19 |
20 |
21 | 22 |
23 |
24 | 89 |
90 | 91 |
92 | {{ content }} 93 |
94 | 95 | {% include share.html %} 96 | 97 |
98 |

Did you like the article? You can hire me.

99 |

I'm a UX, UI Designer and Front End Developer. I focus on building accessible and easy to use websites and apps. Get in touch by email: 100 | contact@ishadeed.com

101 |
102 | 103 |
104 |

About the author:

105 | {% include author.html %} 106 |
107 |
108 |
109 | 110 |
111 |
112 |

More articles

113 |
114 | {% if page.next %} 115 | 116 | {% endif %} 117 | 118 | {% if page.previous %} 119 | 120 | {% endif %} 121 |
122 |
123 |
124 | 125 |
126 |

Share your thoughts and ideas:

127 | 128 | {% if page.comments %} 129 |
130 | 140 | 141 | {% endif %} 142 |
143 | 144 | 145 |
146 | -------------------------------------------------------------------------------- /_posts/2016-09-02-page-title-pattern.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: "Page Title" 4 | desc: "Page Title" 5 | date: 2016-09-02 09:11:03 6 | updated: 2016-09-02 09:11:03 7 | categories: pattern 8 | comments: true 9 | permalink: /pattern/page-title/ 10 | thumb: "assets/images/patterns/page-title/thumb.jpg" 11 | thumbWebp: "assets/images/patterns/page-title/thumb.webp" 12 | outline: 13 | - title: Things to take in consideration 14 | link: things-to-take-in-consideration 15 | subtitles: 16 | - subtitle: Always use an h1 for the page title 17 | sublink: always-use-an-h1-for-the-page-title 18 | - subtitle: Be sure to add an alt text for the img 19 | sublink: be-sure-to-add-an-alt-text-for-the-img 20 | - subtitle: Include a text 21 | sublink: include-a-text 22 | - subtitle: Add logo description when needed 23 | sublink: add-logo-description-when-needed 24 | - title: Final demo 25 | link: final-demo 26 | summary: "A page title is the most important thing in a web page. Imagine a document without a title? We will explore different ways to use page titles under different circumstances" 27 | stories: 28 | - I should be read the page title when CSS is not available. 29 | - I want to know the text content even if the title is an image 30 | ingredients: 31 | - h1 32 | - link 33 | - aria-label 34 | - img 35 | --- 36 | 37 | ## Things to take in consideration 38 | 39 | ### 1- Always use an `h1` for the page title 40 | 41 | Image a word document without a title? 😱 42 | 43 | It's not good to just through an anchor link `` and then to depend on it as the page title. Screen readers won't get that easily. 44 | 45 | {% highlight html linenos %} 46 |
47 | 48 |
49 | {% endhighlight %} 50 | 51 | ### 2- Be sure to add an `alt` text for the `img` 52 | 53 | In case you have the logo as an img (Most of the websites do that), then you must add meaning of the logo inside the `alt` attribute. 54 | 55 | {% highlight html linenos %} 56 |
57 |

58 | 61 |

62 |
63 | {% endhighlight %} 64 | 65 | Screen readers will get the text content in `alt` attribute. This is important and when it's not included, users won't get the meaning of this link. 66 | 67 | Another option will be to leave the `alt` empty and then to add the logo meaning as a text inside the link. 68 | 69 | {% highlight html linenos %} 70 |
71 |

72 | 75 | Knowledge Space 76 |

77 |
78 | {% endhighlight %} 79 | 80 | In case you want to hide the text, then you should hide it visually with CSS. 81 | 82 | {% highlight css linenos %} 83 | .logo { 84 | position: absolute; 85 | clip: rect(1px, 1px, 1px, 1px); 86 | padding: 0; 87 | border: 0; 88 | height: 1px; 89 | width: 1px; 90 | overflow: hidden; 91 | } 92 | {% endhighlight %} 93 | 94 | ### 3- Include a text 95 | 96 | When the logo is added as a `background-image` in CSS, be sure to add it as a text. 97 | 98 | {% highlight html linenos %} 99 |
100 |

101 | 102 |

103 |
104 | {% endhighlight %} 105 | 106 | {% highlight css linenos %} 107 | .logo { 108 | background: url('logo.svg'); 109 | } 110 | {% endhighlight %} 111 | 112 | Implementing a page title in that way is not accessible. We should add the text and hide it with CSS `text-indent`. 113 | 114 | {% highlight html linenos %} 115 |
116 |

117 | 118 |

119 |
120 | {% endhighlight %} 121 | 122 | {% highlight css linenos %} 123 | .logo { 124 | background: url('logo.svg'); 125 | text-indent: -100%; 126 | } 127 | {% endhighlight %} 128 | 129 | ### 4- Add logo description when needed 130 | 131 | In the below example, when a screen reader read "a11ymatters", it will be hard to understand the meaning of that. 132 | 133 | {% highlight html linenos %} 134 |
135 |

136 | 137 | a11ymatters 138 | 139 |

140 |
141 | {% endhighlight %} 142 | 143 | A solution for this is be to add `aria-label` attribute with the correct meaning. 144 | 145 | {% highlight html linenos %} 146 |
147 |

148 | 149 | a11ymatters 150 | 151 |

152 |
153 | {% endhighlight %} 154 | 155 | Notice how Chrome canceled the content "a11ymatters" and replaced it with the title inside `aria-label`. 156 | 157 | {% include figure.html 158 | img="../../assets/images/patterns/page-title/chrome-a11y.jpg" 159 | title = "" 160 | %} 161 | 162 | In the meantime, the accessibility inspection is not available by default in Chrome. Follow these [instructions](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a) to learn about that. -------------------------------------------------------------------------------- /_posts/2016-09-14-skip-link-pattern.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: "Skip Navigation Link" 4 | desc: "Skip Link" 5 | date: 2016-09-14 09:11:03 6 | updated: 2016-09-14 09:11:03 7 | categories: pattern 8 | comments: true 9 | permalink: /pattern/skip-link/ 10 | thumb: "assets/images/patterns/skip/thumb.jpg" 11 | thumbWebp: "assets/images/patterns/skip/thumb.webp" 12 | outline: 13 | - title: What is a skip link? 14 | link: what-is-a-skip-link 15 | - title: Implementing a Skip Navigation Link 16 | link: implementing-a-skip-navigation-link 17 | - title: Final demo 18 | link: final-demo 19 | summary: "Imagine that your mouse is not working and you want to use the keyboard to browse the web. With the skip link, you will be able to jump quickly to the content without tabbing through every single link in the website header." 20 | stories: 21 | - I should be able to skip to content quickly. 22 | - I should know get that this is a button for skipping navigation. 23 | ingredients: 24 | - link 25 | - positioning 26 | --- 27 | 28 | ## What is a skip link? 29 | 30 | When browsing a website with a keyboard, we need a quick way to skip a group of navigation items. Without that skip link, we will need to tab through the whole links to get out of the navigation area. 31 | 32 | In small websites, it might be ok to tab through 5 links. Lets explore the below example of [New York Times](www.nytimes.com) design. 33 | 34 | {% include figure.html 35 | img="../../assets/images/patterns/skip/nytimes.jpg" 36 | title = "" 37 | %} 38 | 39 | How many tabs you need in order to reach the content area? In this design, we have almost 30 links to tab through. 40 | 41 | New York times did a great job in order to make it easy for users to: 42 | 43 | - Skip to navigation 44 | 45 | - Skip to content 46 | 47 | {% include figure.html 48 | img="../../assets/images/patterns/skip/nytimes-tabbing.gif" 49 | title = "" 50 | %} 51 | 52 | ## Implementing a Skip Navigation Link 53 | 54 | The idea is to place a link before all all focusable elements in the source order. That way, we can style the skip link and hide it off screen with CSS. 55 | 56 | Then, inside `href` attribute we should add a `#` followed by the ID value of the content block. 57 | 58 | {% highlight html linenos %} 59 | 60 |
61 | 62 |
63 | 66 |
67 |
68 | 69 |
70 |
71 | 72 | {% endhighlight %} 73 | 74 | {% highlight css linenos %} 75 | .skip-link { 76 | position: fixed; 77 | top: -200px; 78 | } 79 | {% endhighlight %} 80 | 81 | {% include figure.html 82 | img="../../assets/images/patterns/skip/explain-hiding-link.jpg" 83 | title = "" 84 | %} 85 | 86 | Notice the dotted line that represents the browser window. Anything goes outside it is hidden off-screen. 87 | 88 | When pressing on `tab` key, the first element that will receive focus is the skip link element. Why? because it's the first one in the source order. 89 | 90 | In CSS, we will tell the browser in case the link is focused, show it at the top of the screen. 91 | 92 | {% highlight css linenos %} 93 | .skip-link:focus { 94 | top: 0; /* Now the link will appear */ 95 | } 96 | {% endhighlight %} 97 | 98 | {% include figure.html 99 | img="../../assets/images/patterns/skip/explain-hiding-link-focused.jpg" 100 | title = "" 101 | %} 102 | 103 | ## Use `em` for the positioning 104 | 105 | When setting the value of `top` property, be sure to test how it will look while changing the browser default font size. I didn't take care of this point while working on a11ymatters design, notice the top edge of the browser. The skip link is not completely hidden off screen. 106 | 107 | {% include figure.html 108 | img="../../assets/images/patterns/skip/skip-browser-zoom.jpg" 109 | title = "" 110 | %} 111 | 112 | {% highlight css linenos %} 113 | .c-skip { 114 | position: absolute; 115 | left: 50%; 116 | top: -2.5em; /* it's better to set this value in relative units, like em */ 117 | padding: 0.75em; 118 | } 119 | {% endhighlight %} 120 | 121 | For more info about that, read my [article](https://css-tricks.com/building-resizeable-components-relative-css-units/) on CSS Tricks about building resizeable components with relative CSS units. 122 | 123 | ## Final Demo 124 | 125 | Click on the white area in the demo below and then start tabbing. Did you notice our skip link? 126 | 127 |

See the Pen a11ymatters - Skip Navigation Link by Ahmad Shadeed (@shadeed) on CodePen.

128 | -------------------------------------------------------------------------------- /_posts/2016-09-21-intro-wai-aria.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "What is WAI-ARIA?" 4 | date: 2016-09-21 09:11:03 5 | categories: article 6 | comments: true 7 | permalink: /article/intro-wai-aria/ 8 | --- 9 | 10 | ## Introduction 11 | 12 | WAI-ARIA is a shorthand for (Web Accessibility Initiative – Accessible Rich Internet Applications). 13 | 14 | > **WAI-ARIA** is technical specification published by the W3C that specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with HTML, JavaScript, Ajax and related technologies. - [Wikipedia](https://en.wikipedia.org/wiki/WAI-ARIA) 15 | 16 | ARIA will help us to define a way to make our websites and web applications more accessible. By using HTML attributes that will define the **role**, **states** and **properties** of specific HTML elements. It will bridge areas where accessibility can't be perfect with semantic HTML. 17 | 18 | ## Accessibility Tree 19 | 20 | Each web page has an accessibility tree that got parsed by the browser or screen readers. That tree contains different elements from the pages with their nested elements. 21 | 22 | > the accessibility tree is a subset of the DOM tree. It includes the user interface objects of the user agent and the objects of the document. Accessible objects are created in the accessibility tree for every DOM element that should be exposed to an assistive technology, either because it may fire an accessibility event or because it has a property, relationship or feature which needs to be exposed. - [The Paciello Group](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) 23 | 24 | {% include picture.html 25 | svgPath="../../assets/images/articles/aria-intro/aria.svg" 26 | pngPath="../../assets/images/articles/aria-intro/aria.png" 27 | title = "Comparing the accessibility before and after using ARIA" 28 | %} 29 | 30 | The above figure shows us how ARIA can help us in bridging the gaps in our pages. By using ARIA attributes, we will be able to do that. 31 | 32 | ## ARIA Roles 33 | 34 | We can use roles for: 35 | 36 | - Widgets: menu, accordion, modal. 37 | 38 | - Elements: header, main, aside, footer. 39 | 40 | {% highlight html linenos %} 41 | 44 | {% endhighlight %} 45 | 46 | {% highlight html linenos %} 47 | 50 | {% endhighlight %} 51 | 52 | [Checkout the spec for more roles](https://www.w3.org/TR/wai-aria/roles#widget_roles) 53 | 54 | ### ARIA States 55 | 56 | Suppose you have a button that toggle a mobile menu, to make it clearer for screen readers, you should use the ARIA state `aria-expanded` which is a boolean attribute. 57 | 58 | {% highlight html linenos %} 59 | 62 | {% endhighlight %} 63 | 64 | ### ARIA Properties 65 | 66 | With properties, we can provide more info about a specific element or a relationship between element and the other. 67 | 68 | {% highlight html linenos %} 69 | 72 | {% endhighlight %} 73 | 74 | In the above example, screen readers will read the additional text we added "Main menu", this will make it easier for the user. 75 | 76 | Another example is on using `aria-describedby` attribute. Lets suppose that we want to make a custom region in our page. 77 | 78 | {% highlight html linenos %} 79 |
80 |

Latest Articles

81 |

Your content goes there..

82 |
83 | {% endhighlight %} 84 | 85 | We are saying: this section is labeled by the element that has an ID of **"title"**. With that in place, we created a relationship between the `
` and `

` elements. Now, screen readers will read that section as a landmark. 86 | 87 | [Read this article for more info on regions](/article/intro-html5-sectioning-elements/) 88 | 89 | -------------------------------------------------------------------------------- /_posts/2016-10-11-using-divs-for-everything.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Don't Use DIVs for Everything" 4 | date: 2016-10-11 08:11:03 5 | categories: article 6 | comments: true 7 | permalink: /article/dont-use-divs-for-everything/ 8 | --- 9 | 10 | ## Introduction 11 | 12 | At the early months of my Front-End career, I was intrigued to the idea of using `
`s for almost everything. For example, instead of picking an `

` for a post title, I would choose a `
` and make it look like a heading. 13 | 14 | If I want to build an article component, I won't think about anything semantic. I just use `
`s because you know, it's way faster than picking semantic elements. The reason for that is because I get used to [Emmet](http://emmet.io/) plugin, where I just type `.post-date` and then press `tab` to get a new `
`. 15 | 16 | {% include figure.html 17 | img="../../assets/images/articles/divs-for-everything/emmet.gif" 18 | title = "An animated image shows how typing with Emmet plugin might make us lazy to write semantic HTMl." 19 | %} 20 | 21 | ## How I did it in the past 22 | 23 | {% highlight html %} 24 |
25 |
October 11, 2016
26 |
Here is the post title
27 |
By Ahmad Shadeed
28 |
29 | {% endhighlight %} 30 | 31 | For a person that is not aware about web [accessibility](/article/beginners-guide-to-web-a11y/), this might look fine. The old me see that this markup is totally fine as well. If I look at this markup now, I will be like: OMG!! RIP HTML. 32 | 33 | ## The right way to build things 34 | 35 | HTML provides with many elements to describe content in the best semantic way. Here is the best way to describe the above example: 36 | 37 | {% highlight html %} 38 |
39 | 40 |

Here is the post title

41 |

By Ahmad Shadeed

42 |
43 | {% endhighlight %} 44 | 45 | ## CSS is an enhancement 46 | 47 | When I approached that bad way of writing HTML, I supposed that CSS is always there, while in reality it's an enhancement. When we compare both examples with `
`s **VS** semantic elements, we will notice something as in the following comparison image: 48 | 49 | {% include figure.html 50 | img="../../assets/images/articles/divs-for-everything/compare.jpg" 51 | title = "A Comparison between using semantic elements and divs when CSS is off." 52 | %} 53 | 54 | Without CSS, the semantic HTML is looking clearer than the `
`s one in terms of font size, font weight and spacing. This is the default look that we get for free! Each browser has default styles applied for some HTML elements (User Agent Stylesheet). -------------------------------------------------------------------------------- /_posts/2016-10-18-pagination-pattern.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: "Pagination" 4 | desc: "Pagination" 5 | date: 2016-10-20 05:11:03 6 | updated: 2016-10-24 05:11:03 7 | categories: pattern 8 | comments: true 9 | permalink: /pattern/pagination/ 10 | thumb: "assets/images/patterns/pagination/thumb.jpg" 11 | thumbWebp: "assets/images/patterns/pagination/thumb.webp" 12 | outline: 13 | - title: Things to take in consideration 14 | link: things-to-take-in-consideration 15 | subtitles: 16 | - subtitle: Wrap the pagination links in a nav element 17 | sublink: wrap-the-pagination-links-in-a-nav-element 18 | - subtitle: Labeling the navigation links 19 | sublink: labeling-the-navigation-links 20 | - subtitle: Indicate which element is currently active 21 | sublink: indicate-which-element-is-currently-active 22 | - title: Using JavaScript to dynamically add the aria-label 23 | link: using-javascript-to-dynamically-add-the-aria-label 24 | - title: Final Demo 25 | link: final-demo 26 | 27 | summary: "When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page." 28 | stories: 29 | - I should be able to navigate by keyboard. 30 | - I should be able to know that there is a pagination navigation when scanning the page with a screen reader. 31 | - Each navigation item should be read as "Goto Page 1". 32 | - I need to know which element is currently active. 33 | - I need to navigate with Next and Previous links. 34 | ingredients: 35 | - aria-label 36 | - aria-current 37 | - role=navigation 38 | - nav 39 | - links 40 | --- 41 | 42 | ## Things to take in consideration 43 | 44 | ### 1- Wrap the pagination links in a `

-------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | {{ site.name | xml_escape }} 7 | {% if site.description %}{{ site.description | xml_escape }}{% endif %} 8 | {{ site.url }} 9 | 10 | {% for post in site.posts limit:10 %} 11 | 12 | {{ post.title | xml_escape }} 13 | {% if post.author.name %} 14 | {{ post.author.name | xml_escape }} 15 | {% endif %} 16 | {% if post.excerpt %} 17 | {{ post.excerpt | xml_escape }} 18 | {% else %} 19 | {{ post.content | xml_escape }} 20 | {% endif %} 21 | {{ post.date | date_to_rfc822 }} 22 | {{ site.url }}{{ post.url }} 23 | {{ site.url }}{{ post.url }} 24 | 25 | {% endfor %} 26 | 27 | 28 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserSync = require('browser-sync'); 3 | var sass = require('gulp-sass'); 4 | var prefix = require('gulp-autoprefixer'); 5 | var cp = require('child_process'); 6 | var imagemin = require('gulp-imagemin'); 7 | var webp = require('gulp-webp'); 8 | 9 | var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll'; 10 | var messages = { 11 | jekyllBuild: 'Running: $ jekyll build' 12 | }; 13 | 14 | /** 15 | * Build the Jekyll Site 16 | */ 17 | gulp.task('jekyll-build', function (done) { 18 | browserSync.notify(messages.jekyllBuild); 19 | return cp.spawn( jekyll , ['build'], {stdio: 'inherit'}) 20 | .on('close', done); 21 | }); 22 | 23 | /** 24 | * Rebuild Jekyll & do page reload 25 | */ 26 | gulp.task('jekyll-rebuild', ['jekyll-build'], function () { 27 | browserSync.reload(); 28 | }); 29 | 30 | /** 31 | * Wait for jekyll-build, then launch the Server 32 | */ 33 | gulp.task('browser-sync', ['sass', 'jekyll-build'], function() { 34 | browserSync({ 35 | server: { 36 | baseDir: '_site' 37 | } 38 | }); 39 | }); 40 | 41 | /** 42 | * Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds) 43 | */ 44 | gulp.task('sass', function () { 45 | return gulp.src('_scss/main.scss') 46 | .pipe(sass({ 47 | includePaths: ['scss'], 48 | onError: browserSync.notify 49 | })) 50 | .pipe(prefix(['last 15 versions', '> 1%', 'ie 8'], { cascade: true })) 51 | .pipe(gulp.dest('_site/assets/css')) 52 | .pipe(browserSync.reload({stream:true})) 53 | .pipe(gulp.dest('assets/css')); 54 | }); 55 | 56 | /** 57 | * Watch scss files for changes & recompile 58 | * Watch html/md files, run jekyll & reload BrowserSync 59 | */ 60 | gulp.task('watch', function () { 61 | gulp.watch('_scss/**/*.scss', ['sass']); 62 | gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_posts/*'], ['jekyll-rebuild']); 63 | }); 64 | 65 | /** 66 | * Minify the images 67 | */ 68 | gulp.task('imagemin', () => 69 | gulp.src('assets/images/patterns/**/*.jpg') 70 | .pipe(imagemin()) 71 | .pipe(gulp.dest('assets/images/patterns')) 72 | ); 73 | 74 | 75 | /** 76 | * Convert JPGs to Webp 77 | */ 78 | gulp.task('webp', () => 79 | gulp.src('assets/images/patterns/**/thumb.jpg') 80 | .pipe(webp()) 81 | .pipe(gulp.dest('assets/images/patterns')) 82 | ); 83 | 84 | /** 85 | * Default task, running just `gulp` will compile the sass, 86 | * compile the jekyll site, launch BrowserSync & watch files. 87 | */ 88 | gulp.task('default', ['browser-sync', 'watch']); 89 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Home 4 | --- 5 |
6 |
7 |
8 |

Accessibility Matters

9 |

Documenting everything through the journey of learning web accessibility.

10 |

11 | Read the introductory article 12 |

13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 |

Articles

21 | {% include articles.html %} 22 | Read more articles 23 |
24 |
25 | 26 | 27 | 28 |
29 |
30 |

Patterns

31 | {% include patterns.html %} 32 | Explore all patterns 33 |
34 |
35 | 36 | 37 |
-------------------------------------------------------------------------------- /mockup-to-markup.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Mockup to Markup 4 | permalink: /mockup-to-markup/ 5 | --- 6 |
7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |
20 |

Mockup to Markup

21 |

Picking the right HTML that describes your content and design is not easy. We will explore together different ways to mark up design mockups.

22 | 23 |
24 |
25 |
WAI-ARIA
26 |
ARIA will help us to define a way to make our websites and web applications more accessible. By using HTML attributes that will define the role, states and properties of specific HTML elements. It will bridge areas where accessibility can’t be perfect with semantic HTML. 27 | 28 | 33 |
34 |
35 |
36 | 37 |
38 |
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-sync-jekyll", 3 | "version": "0.0.0", 4 | "description": "A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Shane Osbourne", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "browser-sync": "^1.3.7", 13 | "gulp": "^3.8.8", 14 | "gulp-autoprefixer": "1.0.0", 15 | "gulp-imagemin": "^3.0.3", 16 | "gulp-sass": "^2.1.0", 17 | "gulp-webp": "^2.3.0" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync.git" 22 | }, 23 | "keywords": [ 24 | "jekyll", 25 | "gulp", 26 | "sass", 27 | "browsersync" 28 | ], 29 | "bugs": { 30 | "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/issues" 31 | }, 32 | "homepage": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync", 33 | "dependencies": { 34 | "sass-mq": "^3.2.9" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /patterns.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Patterns 4 | permalink: /patterns/ 5 | --- 6 |
7 |
8 |

Patterns

9 |

Different patterns and components, with detailed articles and breakdowns on how to build them, testing and picking the best 10 | for your project.

11 | 12 | {% include patterns.html %} 13 |
14 |
-------------------------------------------------------------------------------- /terms.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Terms 4 | permalink: /terms/ 5 | --- 6 |
7 |
8 |

Terms

9 |

A collection of all terms used accross the articles and patterns.

10 | 11 |
12 |
13 |
WAI-ARIA
14 |
ARIA will help us to define a way to make our websites and web applications more accessible. By using HTML attributes that will define the role, states and properties of specific HTML elements. It will bridge areas where accessibility can’t be perfect with semantic HTML. 15 |
16 | 17 |
Web Accessibility
18 |
the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------