{"id":576,"date":"2018-07-06T18:58:07","date_gmt":"2018-07-06T18:58:07","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/?post_type=chapter&p=576"},"modified":"2018-07-06T19:03:30","modified_gmt":"2018-07-06T19:03:30","slug":"html-based-text-enlargement-and-reflow","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/chapter\/html-based-text-enlargement-and-reflow\/","title":{"rendered":"Other Techniques for Checking Accessibility"},"content":{"raw":"

Use a Web Developer Extension in Firefox to Disable all CSS Styles and Turn Off all Images<\/h2>\r\nWeb Developer add-on for Firefox by Chris Pederick<\/a> is also a good extension that will allow you to turn off all CSS styles and see the structure of the page. This structure is what a screen reader will detect and read back. This extension for Firefox will also allow you to turn off all images, to check for alternative text which the screen reader will read back. WebAIM's page on how you can use the Disable feature of the Web Developer extension to check for accessibility<\/a> is at http:\/\/webaim.org\/resources\/webdev\/.\r\n

HTML Based Text Enlargement and Reflow<\/h2>\r\nBecause people with low vision will increase their default browser font size, text should be formatted with relative font size units such as em, or %. Content should also respond to a reduced window size and the user\u2019s set font-size by\u00a0reflowing\u00a0in a logical order, and not clipping content. You can check this by entering Responsive Design Mode<\/strong> with Mozilla Firefox's Web Developer<\/strong>\u00a0tool under the\u00a0Tools<\/strong> menu\u00a0and then dragging the lower right corner of the browser window to the left and upward. The page content, including the text\u00a0shouldn\u2019t\u00a0just scale down or shrink to fill the reduced\u00a0viewport window. Text size should remain readable, which typically involves the text becoming slightly larger, but it could possibly stay the same size.\r\n\r\nIt's also possible to check page response to a reduced window size in Chrome browser. You do this by first clicking on the middle \u201cRestore Down<\/strong>\u201d icon at the top right of the screen that looks like a window frame over the top of another window frame. Then, hover your mouse over the lower right corner of the browser window until it becomes a diagonal arrow. Click and drag the lower right corner up and to the left.\u00a0The text should reflow\u00a0and possibly\u00a0change font size.\u00a0If the developer used CSS media queries to layout the page, the font size may increase when the window approaches the size of a phone or small tablet. This would be an example of a best practice.\r\n

Look at the Page Info<\/h2>\r\nA user can look at a web page's info within Mozilla Firefox browser by right clicking on a web page and selecting View Page Info<\/strong>. This is a quick way to see what information is coded into the meta elements within the head of a web page. These meta tags give information about the page that help screen reader users know what it is about when they find the page within Google results or on Social Media. A properly marked up page will have a unique title at the top of the General<\/strong> tab.\u00a0 A meta \"description\" is particularly helpful and shows highlighted in blue in the image below. The image below is a screen capture of the page information for The Ohio State University's home page. It has a unique title at the top that says, \"The Ohio State University.\" The \"og\" tags provide information to FaceBook users when the page is shared on Facebook.\u00a0 The \"twitter\" tags provide a title, description, and an image for a Twitter Card when the page is shared on Twitter.\r\n\r\n\"The\r\n\r\n ","rendered":"

Use a Web Developer Extension in Firefox to Disable all CSS Styles and Turn Off all Images<\/h2>\n

Web Developer add-on for Firefox by Chris Pederick<\/a> is also a good extension that will allow you to turn off all CSS styles and see the structure of the page. This structure is what a screen reader will detect and read back. This extension for Firefox will also allow you to turn off all images, to check for alternative text which the screen reader will read back. WebAIM’s page on how you can use the Disable feature of the Web Developer extension to check for accessibility<\/a> is at http:\/\/webaim.org\/resources\/webdev\/.<\/p>\n

HTML Based Text Enlargement and Reflow<\/h2>\n

Because people with low vision will increase their default browser font size, text should be formatted with relative font size units such as em, or %. Content should also respond to a reduced window size and the user\u2019s set font-size by\u00a0reflowing\u00a0in a logical order, and not clipping content. You can check this by entering Responsive Design Mode<\/strong> with Mozilla Firefox’s Web Developer<\/strong>\u00a0tool under the\u00a0Tools<\/strong> menu\u00a0and then dragging the lower right corner of the browser window to the left and upward. The page content, including the text\u00a0shouldn\u2019t\u00a0just scale down or shrink to fill the reduced\u00a0viewport window. Text size should remain readable, which typically involves the text becoming slightly larger, but it could possibly stay the same size.<\/p>\n

It’s also possible to check page response to a reduced window size in Chrome browser. You do this by first clicking on the middle \u201cRestore Down<\/strong>\u201d icon at the top right of the screen that looks like a window frame over the top of another window frame. Then, hover your mouse over the lower right corner of the browser window until it becomes a diagonal arrow. Click and drag the lower right corner up and to the left.\u00a0The text should reflow\u00a0and possibly\u00a0change font size.\u00a0If the developer used CSS media queries to layout the page, the font size may increase when the window approaches the size of a phone or small tablet. This would be an example of a best practice.<\/p>\n

Look at the Page Info<\/h2>\n

A user can look at a web page’s info within Mozilla Firefox browser by right clicking on a web page and selecting View Page Info<\/strong>. This is a quick way to see what information is coded into the meta elements within the head of a web page. These meta tags give information about the page that help screen reader users know what it is about when they find the page within Google results or on Social Media. A properly marked up page will have a unique title at the top of the General<\/strong> tab.\u00a0 A meta “description” is particularly helpful and shows highlighted in blue in the image below. The image below is a screen capture of the page information for The Ohio State University’s home page. It has a unique title at the top that says, “The Ohio State University.” The “og” tags provide information to FaceBook users when the page is shared on Facebook.\u00a0 The “twitter” tags provide a title, description, and an image for a Twitter Card when the page is shared on Twitter.<\/p>\n

\"The<\/p>\n

 <\/p>\n","protected":false},"author":7,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["heather-caprette"],"pb_section_license":"cc-by-nc-sa"},"chapter-type":[],"contributor":[61],"license":[58],"class_list":["post-576","chapter","type-chapter","status-publish","hentry","contributor-heather-caprette","license-cc-by-nc-sa"],"part":376,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":4,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/576\/revisions"}],"predecessor-version":[{"id":582,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/576\/revisions\/582"}],"part":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/parts\/376"}],"metadata":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/576\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=576"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapter-type?post=576"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/contributor?post=576"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/license?post=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}