To view the effect use the zoom feature, or change the window width of your browser. The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. Technical guidance is available for implementing this Success Criterion at the Understanding Success Criterion 1.4.10: Reflow page. Long sets of characters without a space, such as URLs shown as content, can break reflow when the page is zoomed. Using media queries and grid CSS to reflow columns. The following medium complexity example uses HTML and CSS to create a grid layout. Set horizontal scrolling content at a height equivalent to 256 CSS pixels. Example 1: Grid layout in HTML and CSS - Medium complexity.Set vertical scrolling content at a width equivalent to 320 CSS pixels.Note: This success criterion does not apply to content that requires a two-dimensional layout (e.g. Zoom to 400% without requiring the user to scroll horizontally or vertically.So that I can complete my assignments when commuting to school.Įnsure content on your site or application is designed to: Ive noticed a behavior that confused me which that Ive seen in both Chrome and Firefox: I have a flex container with two children, an image and a text div. I want to view content without scrolling back and forth When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than. The layout regions adjust their size as the viewport is adjusted. So that I can interact with everything on the page.Īs a person who reads textbooks on my phone, Example 1: Example 1: Grid layout in HTML and CSS - Medium complexity. I want to have the content readjust to fit the screen This makes it easier to read content and track lines of text.Īs a person with low vision who sets my browser zoom to 400%, When browser zoom is used to enlarge content up to 400%, the content should wrap or reflow to one column, so users do not have to scroll in more than one direction. When sites or applications are not responsive, users must scroll back and forth to reveal lines of text and at times text may be hidden off screen.Ī responsive site or application helps all people using various devices and especially supports those with low vision that require enlarged text. When content in your site or application is zoomed up to 400%, does text wrap into one column so scrolling is not required in more than one direction?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |