-
Notifications
You must be signed in to change notification settings - Fork 0
/
browser-features.html
249 lines (241 loc) · 17.7 KB
/
browser-features.html
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Browser Features | GTx HDM1.2aX</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/gtx_hdm12ax.css" title="Default style" id="rel-css-default" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/black-on-white.css" title="Black on white (high contrast)" id="rel-css-black-on-white" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/white-on-black.css" title="White on black (high contrast)" id="rel-css-white-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/yellow-on-black.css" title="Yellow on black (high contrast)" id="rel-css-yellow-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/lime-on-black.css" title="Lime on black (high contrast)" id="rel-css-lime-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/brown-on-buff.css" title="Brown on buff (low contrast)" id="rel-css-brown-on-buff" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/systemcolours.css" title="System colours" id="rel-css-system-colours" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/nocolours.css" title="‘No colours’" id="rel-css-no-colours" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="author" content="Christophe Strobbe" />
</head>
<body>
<header>
<h1><span class="h1txt">Browser Features</span></h1>
<p class="skiplink"><a class="skiplink" href="#main">Skip to main content</a></p>
</header>
<nav>
<h2>Site Navigation</h2>
<ul>
<li><a href="index.html" rel="home">Home</a></li>
<li><a href="accessibility-usability.html">Accessibility and Usability</a></li>
<li><a href="what-is-web-accessibility.html" title="What Is Web Accessibility and Why Is It Important?">Web Accessibility</a></li>
<li class="active"><a aria-current="page" href="browser-features.html">Browser Features</a></li>
<li><a href="gpii-common-terms.html"><abbr>GPII</abbr> Common Terms</a></li>
<li><a href="glossary.html" rel="glossary"><abbr>ICT</abbr> Accessibility Glossary</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</nav>
<main id="main">
<p>All major browsers have features that help you tweak the presentation of web content,
or at least <abbr>HTML</abbr>-based web content.
We will take a look at <strong>Mozilla Firefox</strong>.
If you use Microsoft <a href="#internet-explorer">Internet Explorer</a>,
<a href="#google-chrome">Google Chrome</a>,
<a href="#opera">Opera</a>
or Safari,
you should also be able to find accessibility features, but not exactly the same ones.
</p>
<h2>Zooming</h2>
<p>The first adaptation you can make is zooming in or out: on your keyboard,
press the <kbd>CTRL</kbd> button and simultaneously press <kbd>+</kbd> to zoom in or <kbd>–</kbd> to zoom out.
Pressing <kbd>CTRL</kbd> and <kbd>0</kbd> simultaneously will reset the zoom level.
Firefox will remember the zoom level you chose and will apply it only to the site where you set that zoom level.
For example, when you zoom to 120% on <a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>
and to 133% on <a href="https://stackoverflow.com/">Stack Overflow</a>,
and you return to these sites the next day, you will see that Firefox still displays Wikipedia pages at 120% and Stack Overflow pages at 133%.</p>
<p>These keyboard shortcuts for zooming also work in Google Chrome, Microsoft Internet Explorer, Safari and Opera, but the zooming increments are not the same in each browser.
On Mac <abbr>OS</abbr>, you’ll need to use the <kbd>Command</kbd> key instead of the <kbd>Ctrl</kbd> key.
</p>
<h2>Colours and Contrast</h2>
<p>Firefox also allows you to choose the foreground and background colours for the content.
Go to <samp>Options</samp>, then <samp>Content</samp>; press the <samp>Colours</samp> button.
</p>
<figure>
<img src="./img/Firefox-v54_Options_Colours-Dialog_cropped-6.png" alt="Colour options for text, background, unvisited links and visited links, for systems colours, for underlining links and for specifying when the chosen colours should be applied" />
<figcaption>Colours dialog in Firefox 54</figcaption>
</figure>
<p>
The buttons next to the labels <samp>Text</samp>, <samp>Background</samp>,
<samp>Unvisited Links</samp> and <samp>Visited Links</samp>
allow you to pick a colour from a grid with seventy colours.
In order to apply these colours, you need to do two things.
First, you need to uncheck the option “<samp>Use system colours</samp>”.
The chosen colours will then be applied to any <abbr>HTML</abbr> content for which the webpage
itself has not specified any colours (this is typically done with <abbr>CSS</abbr> style sheets).
<br />However, since most webpages specify colours for text, background and links,
you also need to to the menu labelled
“<samp>Override the colours specified by the page with your selections above</samp>”
and change its value from “<samp>Never</samp>” to “<samp>Always</samp>”.
If you choose “<samp>Always</samp>”, your preferred colours will immediately be applied to
all web content.
<br />If you choose “<samp>Only with High Contrast Themes</samp>”,
the effect in Firefox 54 on Windows 7 may be somewhat counter-intuitive.
You might expect that activating a high-contrast theme in Windows
will make Firefox apply the colours chose in the Colours dialog.
Instead, Firefox will display the web content in the colours defined in the
Windows contrast theme. (You may need to reload the page to see the effect.)
<br />On Microsoft Windows, you can enable high contrast by going through the following steps:
go to the Windows button, then to <samp>Control Panel</samp> and open <samp>Personalization</samp>.
When you scroll down, you will find a few high contras themes. On Windows 7, these are
High Contrast #1, High Contrast #2, High Contrast Black (essentially white on black)
and High Contrast White (essentially black on white).
</p>
<p>With “<samp>Use system colours</samp>” disabled, you can set your preferred colours for text, background, unvisited links and visited links,
and then choose “<samp>Always</samp>” in the drop-down menu to make sure that these colours are used for every website.
These settings are not site-specific, unlike the zoom level.
</p>
<h2>Font Face and Font Size</h2>
<p>Firefox also allows you to set the default font face and font size for <abbr>HTML</abbr> content.
Again, when you go to <samp>Options</samp>, then <samp>Content</samp>,
you can choose a font face and a font size from two drop-down lists.
Setting a larger default font size can reduce the need for zooming.
Choosing a font face that was developed for on-screen reading can make webpages easier to read.
Examples of font faces developed for computer screens include the sans-serif fonts MS Trebuchet, Verdana and Calibri, and the serif font Georgia.
</p>
<figure>
<img src="./img/Firefox-v54_Options_Content_small_cropped.png" alt="Options panel for Content, with menus for picking the default font and size, and a button to open advanced font settings" />
<figcaption>Partial view of the options for Content in Firefox 54</figcaption>
</figure>
<p>Many frequently used fonts such as Arial, Helvetica and Times New Roman were not developed for on-screen reading.
People with dyslexia can choose a font specially developed for dyslexics (after installing the font on the operating system),
for example,
<a href="https://opendyslexic.org/">OpenDyslexic</a>,
<a href="http://www.k-type.com/fonts/lexie-readable/">Lexie Readable</a>
or <a href="https://www.dyslexiefont.com/">Dyslexie font</a>.
</p>
<p>Under “<samp>Advanced</samp>”, you can specify the default serif font, the default sans-serif font,
and font faces and sizes for writing systems other than the Latin alphabet.
</p>
<!-- 2017: According to validator.w3.org, aria-described-by attribute is currently not allowed on figure or img elements:
<figure aria-described-by="desc-advanced-font-settings">
May 2019: According to validator.w3.org, longdesc on the img element is obsolete, so it is now replaced with aria-describedby.
-->
<figure>
<img src="./img/Firefox-v54_Options_Content_AdvancedFontSettings_cropped-6.png" alt="window detailed font settings; see description below"
aria-describedby="desc-advanced-font-settings" />
<figcaption>Advanced font settings in Firefox 54</figcaption>
</figure>
<p id="desc-advanced-font-settings">
The top half of the window contains several menus related to font families.
The <samp>Fonts for</samp> menu at the top allows you to choose the script or writing system
for which you want to set font properties. It lists scripts such as
Latin, Arabic, Simplified Chinese, Cyrillic and Devanagari.
The next four menus allow you to choose settings for four generic font families:
proportional,
<a href="https://en.wikipedia.org/wiki/Serif" title="'Serif' on Wikipedia">serif</a>,
<a href="https://en.wikipedia.org/wiki/Sans-serif" title="'Sans-serif' on Wikipedia">sans-serif</a> and
<a href="https://en.wikipedia.org/wiki/Monospaced_font" title="'Monospaced font' on Wikipedia">monospace</a>.
The menu for proportional fonts only allows you to choose between Serif and Sans-serif.
The menus for the serif, sans-serif and monospace font familiess allow you to choose a font installed on the operating system.
Note that each of these three menus lists all of the available fonts, without distinguishing between the font families they belong to.
Next to the menus for proportional fonts and monospace fonts, there is a menu where you can set the font size for these font families.
<br />Below the menus for the font families, there is a menu for setting the <samp>Minimum font size</samp>.
Its default value is “None”.
<br />The lower half of the window has a checkbox labelled <samp>Allow pages to choose their own fonts instead of your selections above</samp>.
This checkbox is checked by default.
<br />Finally, there is a menu to set the fallback text encoding for legacy content.
(The menu contains a list of writing systems, not text encodings.)
Its default value is “Default for Current Locale”.
</p>
<h2>Other Browsers</h2>
<h3 id="internet-explorer">Internet Explorer</h3>
<p>Internet Explorer 11 allows you to disable or “ignore” the colours, font styles and font sizes specified on webpages,
but does not allow you to specify your preferred colours in an intuitive way.
In order to fine-tune the colours, font faces and other visual characteristics of webpages,
you need to write a “user style sheet”, <abbr>i.e.</abbr> a <abbr>CSS</abbr> file, that defines these properties.
Advice on writing user style sheets is relatively scarce and usually outdated.
Most advice only covers how to apply the style sheet, not how to write it.
Instructions for various browsers are available in the article
<a href="http://www.commercetuned.co.uk/accessibility/user-style-sheets.php">User style sheets</a>
by CommerceTuned.
</p>
<p>Interestingly,
<a href="https://en.wikipedia.org/wiki/Internet_Explorer_3">Internet Explorer 3</a>
had a toolbar button to increase font size.
This button disappeared in Internet Explorer 4.
(Both the toolbar and the menu bar were removed from the default view in Internet Explorer 7
to save screen space on tablets.)
</p>
<h3 id="google-chrome">Google Chrome</h3>
<p>In Google Chrome 58, settings for fonts and page zoom are available when you open Chrome's settings and
then go to <samp>Show advanced settings</samp>. Under “Web Content”, you can then find options for font size
(Very Small, Small, Medium, Large, Very Large) and page zoom (percentage values in a range from 25% to 500%).
The <samp>Customize fonts …</samp> button opens a dialog where you can set the
standard font, the serif font, the sans-serif font, the fixed-width font and the minimum font size.
There are no options for setting foreground and background colours or for using system colours.
This type of settings needs to be controlled with browser extensions.
</p>
<h3 id="opera">Opera</h3>
<p>In Opera 46, which uses the same rendering options as Google Chrome, options for tweaking fonts and colours
are available in the <samp>Websites</samp> pane of the browser settings.
The button <samp>Customize fonts</samp> opens a dialog where you can set the
standard font, the serif font, the sans-serif font, the fixed-width font and the minimum font size.
You can set the default page zoom. The button labelled <samp>Manage exceptions …</samp>
opens a dialog that lists websites for which you have defined a different zoom
by using keyboard commands <kbd>CTRL</kbd> & <kbd>+</kbd> or <kbd>CTRL</kbd> & <kbd>–</kbd>.
As in Chrome, there are no options for foreground and background colours;
these need to be controlled with browser extensions.
</p>
<p><a href="https://en.wikipedia.org/wiki/History_of_the_Opera_web_browser#Version_12">Opera 12.17</a>,
which still used <a href="https://en.wikipedia.org/wiki/Presto_%28layout_engine%29">Presto</a>
as a layout engine, had much more detailed options for fonts.
</p>
<figure>
<img src="./img/Opera12.17_Preferences_Advanced_Fonts_dialog-6.png" alt="dialog with long list of webpage and browser features for which one can select a font face, described in detail below." />
<figcaption><p>(Image copyright © Opera Software <abbr>AS</abbr>, used with permission.)</p>
<h4>Font options on the <samp>Advanced</samp> tag of Opera 12.17's preferences</h4>
<p>The <samp>Advanced</samp> tag in the Opera 12's Preferences dialog, contains a pane for setting font options.
The biggest part of the dialog is taken up by a scrollable table with two columns: <samp>Type</samp> and <samp>Font</samp>.
The <samp>Type</samp> column lists both webpage features and browser <abbr>UI</abbr> features, while the <samp>Font</samp>
gives the font face that is currently set for the <samp>Type</samp> in the same row.</p>
<p>Webpage features in the table include the following:</p>
<ul>
<li>Webpage normal text</li>
<li>Webpage <pre></li>
<li>Font-family serif</li>
<li>Font-family sans-serif</li>
<li>Font-family cursive</li>
<li>Font-family fantasy</li>
<li>Font-family monospace</li>
<li>Webpage <h1></li>
<li>Webpage <h2></li>
</ul>
<p>The <samp>Choose…</samp> button to the right of the scrollable table opens a dialog
for selecting the font face, the font size and other characteristics of the font, <abbr>i.e.</abbr>
font weight, italic, underline, overline and strikeout.
</p>
<p>Below the table, there is a text box for setting the minimum font size in pixels.
The <samp>International Fonts…</samp> at the bottom of the dialog opens another dialog
for other writing systems, such as Arabic, simplified Chinese characters, Cyrillic, Devanagari, Greek,
Kanji and Hiragana.
</p>
<p>Under <samp>Tools</samp> > <samp>Appearance</samp>, one can also set colour schemes for the browser <abbr>UI</abbr>,
including the "System color scheme".
</p>
</figcaption>
<!-- The technique for describing images in this way is explained at https://www.w3.org/WAI/tutorials/images/complex/#structurally-associating-the-image-and-its-adjacent-long-description-html5 -->
</figure>
<p>Early versions of Opera up till version 7 had a very visible menu with zooming options next to the <abbr>URL</abbr> bar.
In <a href="https://en.wikipedia.org/wiki/History_of_the_Opera_web_browser#Version_8">version 8</a>,
this menu was replaced with a button that gave access to a larger number of options,
including built-in style sheets for users with visual impairments.
</p>
</main>
<footer>
<p id="licence">
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="./img/cc_by_4.0_88x31.png" /></a><br />
<strong>Example Site for GTx HDM1.2aX</strong> by <a href="https://github.com/REMEXLabs"><abbr>HdM</abbr> REMEXLabs</a> is licensed under a
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
<br />Copyright © <span lang="de">Hochschule der Medien</span> (<abbr>HdM</abbr>) / Stuttgart Media University, 2017.
</p>
<p><a href="contact-form.html">Contact form</a> | <a href="publisherinfo.html">Publisher information / <span lang="de">Impressum</span></a> | <a href="https://github.com/REMEXLabs/GTx_HDM1.2aX">GitHub repository</a></p>
</footer>
</body>
</html>