Closed obulat closed 1 year ago
See code snippet 1 for a better way to implement this footer link.
Problem:
<a href="https://wordpress.org" target="_blank" rel="noopener noreferrer" class="hover:no-underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-1 focus-visible:ring-offset-tx text-dark-charcoal"><p class="label-regular flex flex-row items-center gap-1">Part of the <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="aria-hidden"><g id="icon"><path d="M12 3.25C7.175 3.25 3.25 7.175 3.25 12C3.25 16.825 7.175 20.75 12 20.75C16.825 20.75 20.75 16.8241 20.75 12C20.75 7.17593 16.8241 3.25 12 3.25ZM4.13333 12C4.13333 10.8593 4.37778 9.77685 4.81481 8.79815L8.56759 19.0796C5.94352 17.8046 4.13333 15.1139 4.13333 12ZM12 19.8676C11.2278 19.8676 10.4824 19.7546 9.77778 19.5472L12.138 12.6889L14.5556 19.3139C14.5713 19.3528 14.5907 19.3889 14.612 19.4222C13.7944 19.7102 12.9157 19.8685 12 19.8685V19.8676ZM13.0843 8.31204C13.5574 8.28704 13.9843 8.23704 13.9843 8.23704C14.4083 8.18704 14.3583 7.56389 13.9343 7.58889C13.9343 7.58889 12.6602 7.68889 11.837 7.68889C11.0639 7.68889 9.76481 7.58889 9.76481 7.58889C9.34074 7.56389 9.29074 8.21204 9.71481 8.23704C9.71481 8.23704 10.1157 8.28704 10.5398 8.31204L11.7657 11.6704L10.0435 16.8333L7.1787 8.31204C7.65278 8.28704 8.0787 8.23704 8.0787 8.23704C8.50278 8.18704 8.45185 7.56389 8.0287 7.58889C8.0287 7.58889 6.75463 7.68889 5.93241 7.68889C5.78519 7.68889 5.61111 7.68518 5.42593 7.67963C6.83241 5.54444 9.25 4.13426 11.9991 4.13426C14.0472 4.13426 15.912 4.91759 17.3111 6.2C17.2769 6.19815 17.2444 6.19352 17.2093 6.19352C16.4361 6.19352 15.888 6.86667 15.888 7.58982C15.888 8.23796 16.262 8.78704 16.6611 9.43519C16.9602 9.95926 17.3093 10.6324 17.3093 11.6046C17.3093 12.2778 17.05 13.0593 16.7111 14.1481L15.9259 16.7694L13.0833 8.31296L13.0843 8.31204ZM18.9037 8.22593C19.5176 9.3463 19.8676 10.6324 19.8676 12C19.8676 14.9028 18.2944 17.4361 15.9556 18.8L18.3583 11.8528C18.8074 10.7306 18.9565 9.83333 18.9565 9.03518C18.9565 8.74537 18.937 8.47685 18.9037 8.22593Z" fill="currentColor"></path></g></svg> <span class="sr-only">WordPress</span> project</p><!----></a>
Solution:
<a href="https://wordpress.org" target="_blank" rel="noopener noreferrer" class="hover:no-underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-1 focus-visible:ring-offset-tx text-dark-charcoal" aria-label="Part of the WordPress project"><p class="label-regular flex flex-row items-center gap-1">Part of the <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="aria-hidden"><g id="icon"><path d="M12 3.25C7.175 3.25 3.25 7.175 3.25 12C3.25 16.825 7.175 20.75 12 20.75C16.825 20.75 20.75 16.8241 20.75 12C20.75 7.17593 16.8241 3.25 12 3.25ZM4.13333 12C4.13333 10.8593 4.37778 9.77685 4.81481 8.79815L8.56759 19.0796C5.94352 17.8046 4.13333 15.1139 4.13333 12ZM12 19.8676C11.2278 19.8676 10.4824 19.7546 9.77778 19.5472L12.138 12.6889L14.5556 19.3139C14.5713 19.3528 14.5907 19.3889 14.612 19.4222C13.7944 19.7102 12.9157 19.8685 12 19.8685V19.8676ZM13.0843 8.31204C13.5574 8.28704 13.9843 8.23704 13.9843 8.23704C14.4083 8.18704 14.3583 7.56389 13.9343 7.58889C13.9343 7.58889 12.6602 7.68889 11.837 7.68889C11.0639 7.68889 9.76481 7.58889 9.76481 7.58889C9.34074 7.56389 9.29074 8.21204 9.71481 8.23704C9.71481 8.23704 10.1157 8.28704 10.5398 8.31204L11.7657 11.6704L10.0435 16.8333L7.1787 8.31204C7.65278 8.28704 8.0787 8.23704 8.0787 8.23704C8.50278 8.18704 8.45185 7.56389 8.0287 7.58889C8.0287 7.58889 6.75463 7.68889 5.93241 7.68889C5.78519 7.68889 5.61111 7.68518 5.42593 7.67963C6.83241 5.54444 9.25 4.13426 11.9991 4.13426C14.0472 4.13426 15.912 4.91759 17.3111 6.2C17.2769 6.19815 17.2444 6.19352 17.2093 6.19352C16.4361 6.19352 15.888 6.86667 15.888 7.58982C15.888 8.23796 16.262 8.78704 16.6611 9.43519C16.9602 9.95926 17.3093 10.6324 17.3093 11.6046C17.3093 12.2778 17.05 13.0593 16.7111 14.1481L15.9259 16.7694L13.0833 8.31296L13.0843 8.31204ZM18.9037 8.22593C19.5176 9.3463 19.8676 10.6324 19.8676 12C19.8676 14.9028 18.2944 17.4361 15.9556 18.8L18.3583 11.8528C18.8074 10.7306 18.9565 9.83333 18.9565 9.03518C18.9565 8.74537 18.937 8.47685 18.9037 8.22593Z" fill="currentColor"></path></g></svg> project</p><!----></a>
The screen reader text is okay but the issue is, the spacing is not retained. It comes out reading like this.
Part of the WordPressproject
The other easy solution is to insert a space before the closing but this is not always guaranteed to work.
Description
See code snippet 1 for a better way to implement this footer link.
Code snippet 1
Problem:
Solution:
The screen reader text is okay but the issue is, the spacing is not retained. It comes out reading like this.
The other easy solution is to insert a space before the closing but this is not always guaranteed to work.