-
Notifications
You must be signed in to change notification settings - Fork 11
/
tutu.xml
46 lines (46 loc) · 5.79 KB
/
tutu.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<tt xml:lang="" xmlns="http://www.w3.org/ns/ttml"><body><div><p begin="00:00:10" end="00:00:12">Hi, I'm Emily from Nomensa</p><p begin="00:00:12" end="00:00:15">and today I'm going to be talking
about the order of content on your pages.</p><p begin="00:00:16" end="00:00:22">Making sure the content on your web pages is
presented logically is a really important part of web accessibility.
</p><p begin="00:00:23" end="00:00:25">Page content should be ordered so it makes
sense</p><p begin="00:00:25" end="00:00:27">when read through from top to bottom.</p><p begin="00:00:28" end="00:00:31">Assistive technologies such as screen readers
read out content</p><p begin="00:00:31" end="00:00:34">in the order it is presented in the code of
the page.</p><p begin="00:00:34" end="00:00:37">Content may lose its meaning if it is
presented in the wrong order</p><p begin="00:00:37" end="00:00:40">and this can be quite confusing if you
can't see the page.</p><p begin="00:00:41" end="00:00:45">You can check the real order of the content
on your page by disabling</p><p begin="00:00:45" end="00:00:48">the style sheets and reading through the
content from top to bottom.</p><p begin="00:00:48" end="00:00:52">You can do this in Firefox using the Web
Developer Toolbar</p><p begin="00:00:52" end="00:00:57">Select 'CSS', then
'Disable Styles', then 'All Styles'.
</p><p begin="00:00:57" end="00:01:02">This shows you the underlying order of the
content for that particular page.</p><p begin="00:01:02" end="00:01:04">Let's have a look at some examples.
</p><p begin="00:01:04" end="00:01:09">Here we have a page showing some of
Nomensa's Web Accessibility and Web Design services. </p><p begin="00:01:09" end="00:01:13">To a sighted person this content looks fine.
</p><p begin="00:01:13" end="00:01:17">It makes sense as the lists of services are
clearly presented in columns </p><p begin="00:01:17" end="00:01:19">titled Web Accessibility and Web Design.
</p><p begin="00:01:19" end="00:01:26">It is easy to understand which services are
web accessibility and which are web design.</p><p begin="00:01:26" end="00:01:28">If we listen to the page with a screen
reader,</p><p begin="00:01:28" end="00:01:31">we should be able understand which services
belong to each category.</p><p begin="00:01:31" end="00:01:32">Web Accessibility</p><p begin="00:01:32" end="00:01:33">Web Design</p><p begin="00:01:33" end="00:01:34">Accessibility audits</p><p begin="00:01:34" end="00:01:35">User experience design</p><p begin="00:01:36" end="00:01:37">Accessible PDFs</p><p begin="00:01:37" end="00:01:38">Template Development</p><p begin="00:01:38" end="00:01:39">Accessible Media Player</p><p begin="00:01:40" end="00:01:41">Defacto CMS</p><p begin="00:01:42" end="00:01:45">As we have heard the content isn't
ordered correctly in the code of the page.</p><p begin="00:01:45" end="00:01:48">The category titles were read out first
followed</p><p begin="00:01:48" end="00:01:50">by a jumbled up list of services.</p><p begin="00:01:50" end="00:01:53">For someone who can't see the page
</p><p begin="00:01:53" end="00:01:56">it will be difficult to understand which
services belong to which category</p><p begin="00:01:57" end="00:02:01">Let's look at the underlying code in
order to see what's going on.</p><p begin="00:02:02" end="00:02:06">As we can see the content is not grouped
logically. </p><p begin="00:02:06" end="00:02:08">This content has been ordered in this way
</p><p begin="00:02:08" end="00:02:10">so it can be positioned visually.</p><p begin="00:02:10" end="00:02:13">This isn't good for people using
assistive technologies</p><p begin="00:02:13" end="00:02:16">as the information doesn't make
sense in this order</p><p begin="00:02:16" end="00:02:19">when read through from top to bottom.</p><p begin="00:02:19" end="00:02:23">The content hasn't been marked-up
using semantic HTML either.</p><p begin="00:02:23" end="00:02:27">If your content is not ordered logically and
structured correctly</p><p begin="00:02:27" end="00:02:30">it may put some people off using your
website.</p><p begin="00:02:30" end="00:02:34">When building your pages, you need to think
first about the order of the content</p><p begin="00:02:34" end="00:02:36">and the elements used to structure your
content</p><p begin="00:02:36" end="00:02:39">and then about the visual appearance of the
page.</p><p begin="00:02:40" end="00:02:43">We need to revise the order of content on
the page so it makes sense. </p><p begin="00:02:43" end="00:02:46">We will also mark up the category titles
using headings</p><p begin="00:02:46" end="00:02:49">and the list of services using unordered
lists</p><p begin="00:02:49" end="00:02:52"> to add further meaning to the content.
</p><p begin="00:02:52" end="00:02:54">Heading level two Web Accessibility</p><p begin="00:02:54" end="00:02:56">List of three items</p><p begin="00:02:56" end="00:02:57">Bullet Accessibility Audits</p><p begin="00:02:57" end="00:02:59">Bullet Accessible PDFs</p><p begin="00:02:59" end="00:03:01">Bullet Accessible Media Player, list end.
</p><p begin="00:03:01" end="00:03:03">Heading level two Web Design</p><p begin="00:03:03" end="00:03:04">List of three items</p><p begin="00:03:04" end="00:03:05">Bullet User Experience Design</p><p begin="00:03:05" end="00:03:06">Bullet Template Development</p><p begin="00:03:06" end="00:03:09">Bullet Defacto CMS, list end</p><p begin="00:03:09" end="00:03:12">This content makes a lot more sense in this
order!</p><p begin="00:03:12" end="00:03:14">And just to double check</p><p begin="00:03:14" end="00:03:18">Let's look at the underlying code
order by disabling our styles</p><p begin="00:03:20" end="00:03:23">Excellent! This content should now make
sense to everybody!</p></div></body></tt>