I'm working on building a accessible website in which we have a web page where upper half part of web page is taken by an image and lower half part of website is a scrollable region where we can navigate through website and use it.
When I navigate through website using JAWS and arrowkeys it scrolls the content perfectly while navigating down, but when I try to navigate back at the top of the page, it doesn't scrolls properly and JAWS focuses on the elements which are behind the static image at the top.
How to make sure that the focused content is visible on the screen and not behind the image?
Sample Image for reference.
Edit 1: I tried adding tabindex='0' attribute and also by adding anchor tags inside the scrollable content as suggested in https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed but it didn't worked for me.
Below is the sample code and the link for the page where we can test the issue with JAWS and navigating through arrow keys
https://www.w3.org/WAI/content-assets/wcag-act-rules/testcases/0ssw9k/89302c4f9eaf142418751a45e6dd025d5d294591.html
<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0">
<h1>WCAG 2.1 Abstract</h1>
<p>
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more
accessible. Following these guidelines will make content more accessible to a wider range of people with
disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
will also often make Web content more usable to users in general.
</p>
</section>
Related
Mobile browsers like Chrome on iOS usually collapse the address bar when the user scrolls down. However, I have a page that adjusts the size of its content to the viewport (basically the content has CSS height:100vh). It's an image gallery so there is no point in it being any bigger than the viewport. Consequently, there is no possibility for the user to scroll. Yet, the page of course can make use of additional space, as this allows displaying the content bigger, providing a better user experience (especially since mobile phone screens are already so tiny).
I wonder if there is a way to maintain the ability to collapse the address bar to the user also on a page that cannot be scrolled. Alternatively, it would be a workaround if the collapsing could be triggered programmatically for example using JavaScript.
I'm getting "Not Mobile Friendly" error in Google search console of my webmaster tools. These errors are only for all single posts/pages. The homepage is still mobile friendly.
Check it:
https://www.google.com/webmasters/tools/mobile-friendly/?url=https%3A%2F%2Ftechreviewpro.com%2Ffree-online-photo-converters-9723%2F
I think this is because of some customization fault because the single pages in mobile devices don't fit to screen; instead, they float left or right.
Possible solution to the below problems
Links too close together - Increase the hit area of the links and add padding
Content wider than screen - use media queries, set content width to 100% and make sure content doesn't have text-overflow: wrap; applied on text.
I've got a simple four-column card layout (Bootstrap grid), which collapses to a single-column layout on mobile. I want to embed a Facebook post within one of the cards. The problem is that Facebook embedded posts on desktop don't expand/collapse to fill their parent container, as they do on mobile. What I'd like to know is if there is a way around this. My cards are about 270px wide, which is below the 350px minimum width for desktop, according to their docs.
My container is a simple div like so:
<div class="content">
<div class="fb-post" data-href="{{post.facebook_link}}">
<!-- Here is what the embedded post's structure looks like -->
<span>
<iframe>
<!-- Widget lives in here -->
</iframe>
</span>
</div>
</div>
Right now when I embed a post in one of my cards, the post forces the card to expand, which wrecks my layout (see attachment). I'm looking for a way to force the post to fill the parent container either through a CSS/JS solution or tricking the Facebook SDK to thinking that it's on mobile.
I've only come across one other post on this issue, but that person explicitly wanted the mobile version of the post. In my case I don't care if it's the mobile version or desktop version as long as I can get it to fill the parent container. For that reason, this question is not a duplicate.
So far I've tried manipulating the height/width of the iframe and/or its parent span element, but as soon as I adjust those numbers, the changes are undone, since the SDK is setting them dynamically.
One way around this is that worked for me, was to use hidden and visible divs using bootstrap 3 css and adjust data-width in facebook code to suit the container size. I used this on my website here link to page if you want a live example. I understand your using iframe, but this was the only option I could find for my site. I have provided my code here just as a guide to illustrate my point, however you will be able to style it better than me as I a sloppy coder I'm afraid...
https://jsfiddle.net/andydry1/6t5o2n8z/1/
data-adapt-container-width="true" *make sure this is set to true*
data-width="300" *change width to suit extra-small, small and large divs *
This isn't the exact answer for your situation; However it may provide some help :-)
Okay, this is a strange one. When the embedded video is clicked (on Chrome) to be seen on fullscreen, it's moved on the right because of the sidebar. On Firefox, it's as it should -the video is correctly stretched over the whole site. However, there is something that doesn't allow Chrome to do that.
Okay, I managed to find that this is connected with the animation-fill-mode. And I'm afraid that this is duplicate of HTML5 video won't maximize beyond container dimensions in native full screen mode
I'm just starting out in web design/CSS so my current knowledge is limited.
With that in mind (this may be very easy for pros to fix), does anyone know why the Facebook iframe on this website won't stay within the sidebar on mobile devices?
http://www.northeastimage.co.uk
It looks great on desktop browsers but on the iPhone for example sits out of the sidebar over the margin sticking to the far right of the screen.
i would go for a user-agent to look trough your css and html, its a cross browser look also support phones and tablets it lets you "tell" the browser that your a phone tough your on your desktop
easy to debug while using it, i pref user agent for chrome get it here
Get strings to view from more viewports than the standard amount that are embedded in the program